<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>

</head>
<body>

<user-card image="https://semantic-ui.com/images/avatar2/large/kristy.png" onclick1="ok"></user-card>

</body>
</html>

<script>
    function ok(e){
        alert(e)
    }
</script>



<script>
    customElements.define("user-card",
        class App extends HTMLElement {
            constructor() {
                super();
                this.attachShadow({ mode: "open" });
            }
            connectedCallback() {
                this.shadowRoot.innerHTML = `
              <style>
                span {
                  background: steelblue;
                  padding: 5px;
                  color: white;
                }
                .user_img{
                    width: 20vw;
                }
              </style>
              <div >
                <span>CSS</span>
                  <img class="user_img" src="${this.getAttribute('image')}">
                  <button onClick="${this.getAttribute('onclick1')}(55)">++</button>
                  <h1 class="countId">3333</h1>
              </div>
        `;
            }
        });
    function add(){
        let list= document.querySelectorAll('user-card')
        for (let i=0;i<list.length;i++){
            list[i].shadowRoot.querySelector(".countId").innerHTML="334"
        }
    }
</script>